<template>
    <el-card class="card-bottom"></el-card>
    <el-card>
        <el-row>
            <el-col :span="12">
                <p style="font-size: 18px;">角色列表</p>
            </el-col>
            <el-col :span="12">
                <div style="float:right;">
                    <el-button type="primary" @click="handleClick(1 , null)">添加</el-button>
                </div>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-table :header-cell-style="{ background: '#FFFFFF', color: '#000000' }" :data="dataInfo.roleData" stripe
            style="width: 100%">
            <el-table-column type="selection" />
            <el-table-column fixed align="center" prop="roleId" label="ID" />
            <el-table-column fixed width="150" align="center" prop="roleName" label="角色名称" />
            <el-table-column fixed width="200" align="center" prop="description" label="角色描述" />
            <el-table-column width="200" align="center" prop="createTime" show-overflow-tooltip label="创建时间" />
            <el-table-column width="200" align="center" fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleClick(2 , scope.row)">分配权限</el-button>
                    <el-button link type="primary" size="small" @click="handleClick(3 , scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="handleClick(4 , scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination 
        :total="dataInfo.totalSize" 
        @changeHandler="changeHandler" />


        <el-dialog
        title="权限分配"
        width="500"
        v-model="roleDialog.permission"
        v-if="roleDialog.permission"
        @close="closeHandle(3)">
            <Suspense>
                <PermissionAssignmentDialog :roleId="roleId" @permissionResult="permissionResult" />
            </Suspense>
        </el-dialog>



        <el-dialog
        title="角色添加"
        width="500"
        v-model="roleDialog.add"
        v-if="roleDialog.add"
        @close="closeHandle(1)">
            <RoleAddDialog @addResult="addResult" />
        </el-dialog>

        <el-dialog
        title="角色编辑"
        width="500"
        v-model="roleDialog.edit"
        v-if="roleDialog.edit"
        @close="closeHandle(2)">
            <RoleEditDialog :roleData="editRoleData" @editResult="editResult" />
        </el-dialog>




    </el-card>
</template>

<script setup>

// API
import { getRolePageList } from "@/api/role"

import {ref, reactive, defineAsyncComponent} from 'vue';

import Pagination from '@/components/pagination/index.vue'
import RoleAddDialog from '@/views/permissionuser/components/RoleAddDialog.vue'
import RoleEditDialog from '@/views/permissionuser/components/RoleEditDialog.vue'


components: { Pagination , RoleAddDialog , RoleEditDialog }

const PermissionAssignmentDialog = defineAsyncComponent(() => import('@/views/permissionuser/components/PermissionAssignmentDialog.vue'))

const queryInfo = reactive({
    form: {
        name: "",
        // 当前第多少页
        pageNum: 1,
        // 每页显示条数
        pageSize: 10,
    }
})

const roleDialog = reactive({
    add: false,
    edit: false,
    permission: false,
})



const dataInfo = reactive({
    roleData: [],
    totalSize: 0
})

// 待编辑角色数据
let editRoleData = {}
// 分配权限的角色id
let roleId = 0
const handleClick = (flag , roleData) => {
    if (flag === 1) {
        roleDialog.add = true
    } else if (flag === 2) {
        roleId = roleData.roleId
        roleDialog.permission = true
    } else if (flag === 3) {
        editRoleData = roleData
        roleDialog.edit = true
    }

}

const roleList = async () => {
    const { data: res } = await getRolePageList(queryInfo.form)
    dataInfo.totalSize = res.totalSize
    dataInfo.roleData = res.content
}
roleList()


const changeHandler = (type,num) => {
    console.log(type)
    console.log(num)
    if (type === 'sizechange') {
        queryInfo.form.pageSize = num
        queryInfo.form.pageNum = 1
    }
    if (type === 'currentchange') {
        queryInfo.form.pageNum = num
    }
    roleList()
}




/**
  * 用户添加结果
*/
const addResult = (result) => {
    console.log("添加结果：" , result)
    if (result) {   // 成功添加
        roleDialog.add = false
        roleList()
    }
}

/**
  * 用户编辑结果
*/
const editResult = (result) => {
    console.log("编辑结果：" , result)
    if (result) {   // 成功添加
        roleDialog.edit = false
        roleList()
    }
}

// 权限分配结果
const permissionResult = (result) => {
    console.log("分配结果：",result)
    if (result) {
        roleDialog.permission = false
    }
}


const closeHandle = (flag) => {
    if (flag === 1) {    // 关闭增加弹框
        roleDialog.add = false
    } else if (flag === 2) {    // 关闭编辑弹窗
        roleDialog.edit = false
    } else if (flag === 3) {
        roleDialog.permission = false
    }
}

</script>

<style lang="scss" scoped>

</style>